<template>
  <div class="app-container">
    <div>
      <p>1、默认</p>
      超出：
      <WTooltip :content="content" class="w-tool-tip">
        <span>{{ content }}</span>
      </WTooltip>
      <br />
      未超出：
      <WTooltip :content="str" class="w-tool-tip">
        <span>{{ str }}</span>
      </WTooltip>
    </div>
    <div>
      <p>2、更改属性</p>
      <p>effect="light" placement="bottom"</p>
      <WTooltip :content="content" class="w-tool-tip" effect="light" placement="bottom">
        <span>{{ content }}</span>
      </WTooltip>
    </div>
  </div>
</template>

<script>
import WTooltip from '@/components/WComponents/WTooltip/index.vue'

export default {
  name: 'test',
  components: { WTooltip },
  data() {
    return {
      str: '你好',
      content: '你好，这是一段话'
    }
  }
}
</script>

<style scoped lang="scss">
.w-tool-tip {
  width: 100px;
  background-color: pink;
}
</style>
